<template>
  <div class="check-in-staff">
    <el-card shadow="never" style="border: none;margin-bottom: 20px;">
      <el-form inline>
        <el-form-item label="姓名：">
          <el-input v-model="params.username" size="mini" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="danger" @click="reset">重置</el-button>
          <el-button size="mini" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="border: none;">
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="username" label="姓名" align="center" />
        <el-table-column prop="phone" label="联系方式" align="center" />
        <el-table-column prop="gender" label="性别" align="center">
          <template v-slot="{ row }">
            {{ row.gender === 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="room" label="宿舍位置" align="center">
          <template v-slot="{ row }">
            {{ `${row?.room?.dormitory?.address}-${row?.room?.name}` }}
          </template>
        </el-table-column>
      </el-table>
      <Pagination style="margin-top: 0; padding-bottom: 0;" :total="total" :limit="params.paginate" @pagination="pagination" />
    </el-card>

  </div>
</template>
<script>
import { getCheckInStaff } from '@/api/v2/dorm'
import Pagination from '@/components/Pagination/index.vue'
export default {
  name: '',
  components: { Pagination },
  data() {
    return {
      list: [],
      params: {
        page: 1,
        paginate: 10,
        username: '',
        roomId: ''
      },
      total: 0,
      loading: false
    }
  },
  created() {
    this.getCheckInStaff()
  },
  methods: {
    async getCheckInStaff() {
      this.loading = true
      try {
        const res = await getCheckInStaff(this.params)
        console.log('res --------->', res)
        this.list = res.data
        this.total = res.meta.total
      } catch (error) {
        this.$message.error(error.response.data.message || '入住人员列表获取失败')
      } finally {
        setTimeout(() => {
          this.loading = false
        }, 500)
      }
    },
    pagination(e) {
      console.log('e --------->', e)
      this.params.page = e.page
      this.params.paginate = e.limit
      this.getCheckInStaff()
    },

    search() {
      this.params.page = 1
      this.getCheckInStaff()
    },

    reset() {
      this.params = this.$options.data().params
      this.getCheckInStaff()
    }
  }
}
</script>
<style lang="scss">
.check-in-staff {
  padding: 20px;
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
